<template>
	<view>
		<image class="image" :src="item.productPhoto" mode=""></image>
		<view class="productName">
			{{item.productName}}
		</view>
		<view class="flex-row-space-between" style="margin:20rpx 35rpx;">
			<view class="">
				<view class="productPrice">
					¥{{item.productPrice}}
				</view>
				<view class="productTurnover">
					已出售:{{item.productPrice}}笔
				</view>
			</view>
		</view>
		<view class="instructions">
			注:直接雇佣或定制，一对一服务，满意再付款，交易 有保障
		</view>
		<view @click="shopClick()" class="shopView flex-row-space-between">
			<view class=" flex-row-flex-start">
				<image class="shopIcon" :src="shop.phonenumber" mode=""></image>
				<view class="">
					<view class="shopName">
						{{shop.shopName}}
					</view>
					<view class="shopTurnover">
						成交量：242笔 好评率：100%
					</view>
					<view class="shopAddress">
						{{shop.shopName}}
					</view>
				</view>
			</view>
			<uni-icons type="right" color="#000" size="40"></uni-icons>

		</view>
		<view class="fixed-bottom" style="background-color: #fff;">
			<view class="bottomView flex-row-space-between">
				<view class="button flex-column-center">
					联系TA
				</view>
				<view @click="payClick()" class="button1 flex-column-center">
					购买服务
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapActions,
		mapState
	} from "vuex";
	import {
		t_product,
		t_shop
	} from '@/api/index.js'
	export default {
		components: {},
		computed: {

		},
		data() {
			return {
				shop: {},
				id: 0,
				item: {}
			}
		},
		computed: {
			...mapState([
				'baseColor'
			]),
		},
		onPageScroll(e) {
			if (e.scrollTop > 20) {
				this.backgroundColor = "#AED0FC"
			} else {
				this.backgroundColor = "#ffffff00"
			}
		},
		onShow() {

		},
		onLoad(e) {
			this.id = e.id
			this.loadData()
		},
		//下拉刷新
		onPullDownRefresh() {


		},
		//加载更多
		onReachBottom() {

		},
		onPageScroll(e) {
			// if (e.scrollTop > 20) {
			// 	this.backgroundColor = "#FBF9FF"
			// } else {
			// 	this.backgroundColor = "#ffffff00"
			// }
		},
		methods: {
			shopClick(){
				uni.setStorageSync('shop', this.shop)
				uni.setStorageSync('product', this.item)
				
				uni.navigateTo({
					url: '/pages/index/product/shop'
				})
			},
			payClick() {
				uni.setStorageSync('shop', this.shop)
				uni.setStorageSync('product', this.item)

				uni.navigateTo({
					url: '/pages/index/product/pay'
				})
			},
			loadData() {


				t_product(this.id).then(res => {
					this.item = res.data
					t_shop(this.item.shopId).then(res => {
						this.shop = res.data
					})
				})


			},


		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.image {
		width: 100%;
		height: 500rpx;
		background-color: $base-color;
	}

	.productName {
		margin: 20rpx 35rpx;
		font-weight: 500;
		font-size: 36rpx;
		color: #131313;
	}

	.productPrice {
		font-weight: 500;
		font-size: 30rpx;
		color: #E74744;
	}

	.productTurnover {
		font-weight: 400;
		font-size: 24rpx;
		color: #595959;
	}

	.instructions {
		margin: 20rpx 35rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #3C8552;
	}

	.shopView {
		margin: 20rpx 0;
		padding: 0 37rpx;
		height: 180rpx;
	}

	.shopIcon {
		margin-right: 20rpx;
		width: 123rpx;
		height: 123rpx;
		background-color: #f5f5f5;
		border-radius: 50%;
	}
	.shopName{
		font-weight: 500;
		font-size: 28rpx;
		color: #131313;
	}
	.shopTurnover{
		margin-top: 4rpx;
		font-weight: 500;
		font-size: 26rpx;
		color: #555555;
	}
	.shopAddress{
		margin-top: 4rpx;
		font-weight: 500;
		font-size: 26rpx;
		color: #555555;
	}

	.bottomView {
		padding: 0 40rpx;
		height: 130rpx;
		margin-bottom: 20rpx;
	}

	.button {
		width: 306rpx;
		height: 90rpx;
		border-radius: 5rpx;
		border: 2px solid #ED6F1A;
		font-weight: 400;
		font-size: 34rpx;
		color: #ED6F1A;
	}

	.button1 {
		width: 306rpx;
		height: 90rpx;
		background: #ED6F1A;
		border-radius: 5rpx;
		font-weight: 500;
		font-size: 34rpx;
		color: #FFFFFF;
	}
</style>